/*
 * @Description:
 * @Author: Jevon
 * @Date: 2021-11-25 11:12:53
 */
import DataMode from '.';
export default class DataModeCross extends DataMode {
  constructor(data, onclick) {
    super();
    this.className = {
      item: 'data-mode',
      line: 'data-mode-line',
      cross: 'cross-data'
    };
    this.config = {
      cross: '交叉数据',
      colField: '列字段：',
      rowField: '行字段：',
      crossField: '交叉字段：'
    };
    this.data = data;
    this.onclick = onclick || (_ => {});
    this._selects = [];
  }

  init() {
    this.container = this.createCross();
    return this;
  }

  // 交叉数据
  createCross() {
    const cls = this.className;
    const config = this.config;
    // 容器
    const div = this.createDiv(cls.item);
    // 状态单选框
    this.createTitle(cls.cross, config.cross, div);

    // 交叉字段
    const line = this.createDiv(cls.line);
    const rowField = this.createSelect(config.rowField, this.data, line);
    const colField = this.createSelect(config.colField, this.data, line);
    const crossField = this.createSelect(config.crossField, this.data, line);

    div.appendChild(line);
    // 变更按钮
    let disabled = false;
    const btn = this.createBtn(evt => {
      // 点击事件
      if (disabled) return;
      // 校验交叉字段
      const colIndex = colField.select.selectedIndex;
      const rowIndex = rowField.select.selectedIndex;
      const crossIndex = crossField.select.selectedIndex;
      if (!colIndex || !rowIndex || !crossIndex) {
        alert('存在字段未选择，请检查');
        return;
      }
      disabled = true;
      // 交叉字段
      const col = colField.select[colIndex].value;
      const row = rowField.select[rowIndex].value;
      const cross = crossField.select[crossIndex].value;

      this.onclick(col, row, cross);
      setTimeout(() => {
        disabled = false;
      }, 2000);
    });
    div.appendChild(btn);
    return div;
  }
}
